import React from 'react';
import { Link } from 'umi';
import logo from '../../assets/logo512.png';
import { Button, Input, Form, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import './login.less';

export default function Login() {
  function onFinish() {}
  return (
    <div className="container1">
      <div className="loginBox">
        <div className="img">
          <img src={logo} alt="" />
        </div>
        <Form
          name="normal_login"
          className="login-form"
          onFinish={onFinish}
          initialValues={{
            remember: true,
            account: 'xiaowang',
            password: '123456',
          }}
        >
          <Form.Item
            name="account"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="用户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码
            </a>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
            或者 <Link to={'/register'}>立即注册!</Link>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
